<template>
  <view>
    <view class="blog-navigation-bar-main"
          :style="{paddingTop:`${sysMenuInfo.top}px`,borderBottomLeftRadius:`${radius}px`,borderBottomRightRadius:`${radius}px`,color:fontColor}"
    >
      <view :class="clickEffect?'blog-navigation-bar-header-select':'blog-navigation-bar-header'"
            :style="{height:`${sysMenuInfo.height}px`}"
            @click="_onClick">
        <slot></slot>
      </view>
      <view style="height: 5px;" v-show="!$slots.attach"/>
      <slot name="attach"></slot>
    </view>
    <slot name="outAttach"></slot>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();
let menuInfo = {top: systemInfo.statusBarHeight || 24, height: 32};
// #ifdef H5
menuInfo = {top: 10, height: 32};
// #endif

// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuInfo = uni.getMenuButtonBoundingClientRect();
// #endif

export default {
  data() {
    return {
      sysMenuInfo: menuInfo
    }
  },
  props: {
    fontColor: {
      type: String,
      default: "#000"
    },
    radius: {
      type: Number
    },
    clickEffect: {
      type: Boolean
    }
  },
  emits: ["onHeadClick"],
  methods: {
    _onClick() {
      this.$emit("onHeadClick")
    }
  }
}
</script>

<style lang="scss">
@import "@/uni.scss";

.blog-navigation-bar-main {
  position: relative;
  background-color: $uni-color-primary;
}

.blog-navigation-bar-header {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-left: 10px;
  font-size: 14px;
}

.blog-navigation-bar-header-select {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-left: 10px;
  font-size: 14px;

  &:active {
    color: $uni-text-color-inverse;
  }
}

</style>
